<template>
  <div>
    <div class="top">
      <!-- <div class="top-icon"
           @click="jump">
        <font-awesome-icon icon="chevron-left" />
      </div>
      <div class="top-font">设置</div> -->
      <van-nav-bar title="设置"
                   class="title"
                   left-text=""
                   left-arrow
                   @click-left="jump"></van-nav-bar>
      <div class="top-text">
        是否接受评论提醒
        <span class="switchbtn">
          <el-switch v-model="value"
                     active-color="#72CACD"
                     inactive-color="#DC143C">
          </el-switch>
        </span>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="mid"
         v-for="(item,index) in listarr"
         :key="index"
         v-bind="name">
      {{item.name}}
      <span class="icon">
        <font-awesome-icon icon="chevron-right" />
      </span>
    </div>
    <div class="bottom">
      <div class="quit">退出当前账号</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: true,
      name: '',
      listarr: [
        { name: '关于绿城生活' },
        { name: '隐私政策' },
        { name: '邀请家人' },
        { name: '清除缓存' },
        { name: '帮助' },
        { name: '屏蔽列表' },
        { name: '意见反馈' },
        { name: '给我们评价' },
        { name: '账号管理' }
      ]
    }
  },
  methods: {
    jump () {
      this.$router.push({ path: '/Mine' })
    }
  }
}
</script>

<style scoped>
.top-font {
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: 25px;
}
.top-icon {
  margin-left: 25px;
  margin-top: 0;
  /* margin-top: 25px; */
}
.top-text {
  margin-left: 25px;
  margin-top: 25px;
  font-size: 1rem;
  color: #778899;
}
.switchbtn {
  float: right;
  margin-right: 25px;
}
.mid {
  position: relative;
  height: 75px;
  line-height: 75px;
  padding-left: 30px;
  border-bottom: rgba(128, 128, 128, 0.178) solid 1px;
  color: #778899;
}
.mid svg {
  float: right;
  height: 100%;
  margin-right: 25px;
}
.bottom {
  height: 50px;
  margin-top: 20px;
}
.quit {
  text-align: center;
  color: #72cacd;
  line-height: 50px;
  border-top: rgba(128, 128, 128, 0.178) solid 1px;
  border-bottom: rgba(128, 128, 128, 0.178) solid 1px;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
</style>
